.seal-editor-wrapper{
  .seal-editor-header{
    position: relative;
    padding: 0 20px;
    line-height: $h_nav;
    border-bottom: 1px solid $border;
    .seal-editor-header-title{
      position: absolute;
      font-size: 16px;
      font-weight: 500;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      line-height: $h_nav;
    }
    .anticon{
      font-size: 24px;
      font-weight: bolder;
      color: $fc3;
      cursor: pointer;
    }
  }
  .seal-editor-content{
    width: 100%;
    height: 70vh;
    overflow: auto;
    padding: 30px 50px 0 50px;
    display: flex;
    flex-direction: row;
    .seal-editor-content-block{
      flex: 1;
      padding: 0 30px;
      &.border{
        border-left: 1px solid $border;
      }
    }
    .seal-editor-content-block-title{
      font-size: 18px;
      font-weight: 500;
      color: $fc2;
      line-height: 26px;
      margin-bottom: 30px;
      position: relative;
      padding-left: 20px;
      &:before{
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -4px;
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: $theme;
      }
    }
    .seal-editor-content-block-tip{
      font-size: 14px;
      color: $fc3;
      line-height: 24px;
    }
  }
  .seal-editor-type-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    .seal-editor-type{
      width: 150px;
      height: 150px;
      border: 1px solid $border;
      border-radius: 5px;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &.active{
        border: 3px solid $theme;
      }
      img{
        width: 90%;
        height: auto;
      }
    }
    .seal-editor-btnType{
      padding: 0px 12px;
      color: $fc1;
      border: 1px solid $border;
      border-radius: 5px;
      margin-right: 10px;
      cursor: pointer;
      &.active{
        border: 1px solid $theme;
        color: $theme;
      }
    }
  }
  .seal-editor-color-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    .seal-editor-color{
      width: 50px;
      height: 50px;
      border-radius: 5px;
      margin-right: 10px;
      cursor: pointer;
      &.red{
        background-color: red;
      }
      &.black{
        background-color: black;
      }
      &.blue{
        background-color: blue;
      }
      &.active{
        position: relative;
        &:before{
          position: absolute;
          top: -2px;
          left: -2px;
          content: '';
          width: 54px;
          height: 54px;
          border: 4px solid $theme;
          border-radius: 5px;
        }
      }
    }
  }
  .seal-editor-seal-wrapper{
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed $border;
    border-radius: 10px;
  }
  .seal-editor-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 0 20px;
    line-height: $h_nav;
    border-top: 1px solid $border;
    text-align: right;
    background: #fff;
  }
}
